<template>
	<view>
		<view class="form">
			<uni-forms v-model="formData" :rules="rules" ref="publishForm">
				<uni-forms-item label="标题" name="title" required>
					<uni-easyinput 
					type="text" 
					v-model="formData.title" 
					placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item label="详情描述" name="content" required>
					<uni-easyinput 
					type="textarea" 
					v-model="formData.content" 
					autoHeight="true"
					placeholder="请输入详情描述"/>
				</uni-forms-item>
				<uni-forms-item label="所在位置" name="position" required>
					<uni-easyinput 
					type="text" 
					disabled="true"
					v-model="formData.position"
					suffixIcon="location-filled"
					@iconClick="getLocation"
					placeholder="请点击图标选择位置" />
				</uni-forms-item>
				<uni-forms-item label="当前城市" name="city" required>
					<uni-data-checkbox v-model="activeCity" :localdata="cities" @change="cityChange"></uni-data-checkbox>
				</uni-forms-item>
				<!-- <uni-forms-item > -->
					<!-- <uni-data-checkbox v-model="activeCity" :localdata="cities" @change="cityChange"></uni-data-checkbox> -->
				<!-- </uni-forms-item> -->
				<uni-forms-item label="是否救治" name="cure" required>
					<uni-data-checkbox v-model="activeCure" :localdata="cureList" @change="cureChange"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="选择类型" name="label" required>
					<uni-data-checkbox 
					v-model="activeLabel" 
					:localdata="labelList" 
					@change="labelChange">
					</uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="上传文件" name="picture" required>
					<uni-file-picker
						v-model="fileList" 
						ref="upload"
						fileMediatype="image" 
						file-extname="png,jpg,jpeg,gif"
						auto-upload="false"
						mode="grid" 
						@select="select" 
						@delete="deleteFile"/>
				</uni-forms-item>
				<view class="pic-tips">请上传 jpg 、jpeg 、png 、gif 图片</view>
			</uni-forms>
			<button @click="submitForm">提 交</button>
		</view>
	</view>
</template>

<script>
	// import uniEasyinput from 'uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
	export default {
		data() {
			return {
				formData:{
					title:null,
					content:null,
					label:'0', //猫狗
					position:'',
					longitude:null,  //经度
					latitude:null,  //纬度
					is_cure:'0', //救治
					city:'hf',
					picture:null
				},
				// 城市选择
				cities: [
					{'value': '3401','text': '合肥'},
					{'value': '1401','text': '太原'},
					{'value': '1201','text': '天津'}],
				activeCity:'hf',
				// 是否救治
				cureList:[
					{value:'0',text:'未救助'},
					{value:'1',text:'已救助'}
				],
				activeCure:'0',
				// 标签选择
				labelList:[
					{text:'狗',value:'0'},
					{text:'猫',value:'1'},
					{text:'其他',value:'2'}
				],
				activeLabel:'0',
				fileList:[],
				picList:[],
				// 表单校验
				rules:{
					title:{
						rules:[
							{required:true,errorMessage:'请输入'}
						],
						validateTrigger:'submit'
					},
					content:{
						rules:[
							{required:true,errorMessage:'请输入'}
						],
						validateTrigger:'submit'
					},
					label:{
						rules:[
							{required:true,errorMessage:'请输入'}
						],
						validateTrigger:'submit'
					},
					position:{
						rules:[
							{required:true,errorMessage:'请选择'}
						],
						validateTrigger:'submit'
					},
					city:{
						rules:[
							{required:true,errorMessage:'请选择'}
						],
						validateTrigger:'submit'
					},
					is_cure:{
						rules:[
							{required:true,errorMessage:'请选择'}
						],
						validateTrigger:'submit'
					},
					picture:{
						rules:[
							{required:true,errorMessage:'请上传'}
						],
						validateTrigger:'submit'
					}
				}
			}
		},
		onShow(){
			// this.$refs.upload.clearFiles()
			// this.formData.picture=null
			// this.picList=[]
		},
		methods: {
			// 提交发布
			submitForm(val){
				this.$refs['publishForm'].validate().then((res)=>{
					let session
					let formData=this.formData
					uni.getStorage({
						key:'session',
						success:(res)=>{
							session=res.data,
							uni.showLoading({
								title:'发布中...',
								success:()=>{
									uni.request({
										url:getApp().globalData.URL+'/message/publish',
										method:'post',
										data:{
											...formData
										},
										header:{
											'Content-Type': 'application/x-www-form-urlencoded' ,
											'session':session
										},
										success:(res)=>{
											this.messageId=res.data
											for(let i=0;i<this.picList.length;i++){
												console.log(this.picList[i])
												uni.uploadFile({
													url:getApp().globalData.URL+'/message/publishPicture',
													filePath: this.picList[i],
													name: 'picture',
													formData:{
														messageId:this.messageId
													},
													header:{
														'session':session
													},
													success:(res)=>{
														if(res===-1){
															uni.hideLoading()
															uni.showToast({
																icon:'error',
																title:'请先登录！'
															})
														}else{
															if(i===this.picList.length-1){
																uni.hideLoading()
																uni.showToast({
																	title:'尽快为您审核~',
																	duration:1500
																})
																this.$refs.publishForm.resetFields()
																this.$refs.publishForm.clearValidate()
																this.$refs.upload.clearFiles()
																this.formData.picture=null
																this.formData.latitude=null
																this.formData.longitude=null
																this.picList=[]
																setTimeout(()=>{
																	uni.switchTab({
																		url:'../home/home'
																	})
																},1500)
															}
														}
													}
												})
											}
										},
										complete:()=>{
											uni.hideLoading()
										}
									})
								}
							})
						}
					})
				}).catch((error)=>{
					uni.showToast({
						title:'请填写完整！',
						icon:'error'
					})
				})
				
			},
			// 城市选择改变
			cityChange(val){
				this.formData.city=val.detail.value
			},
			// 是否救助
			cureChange(val){
				this.formData.is_cure=val.detail.value
			},
			// 选择标签
			labelChange(val){
				this.formData.label=val.detail.value
			},
			// 获取上传状态
			select(e){
				console.log(e.tempFilePaths)
				if(e&&e.tempFilePaths){
					e.tempFilePaths.forEach((item)=>{
						this.picList.push(item)
					})
					this.formData.picture='1'
				}
			},
			// 压缩图片方法
			compress(src){
				return new Promise((resolve,reject)=>{
					uni.compressImage({
						src,
						quality:10,
						success:(res)=>{
							reslove(res)
						},
						fail:(err)=>{
							reject(err)
						}
					})
				})
			},
			// 删除图片
			deleteFile(e){
				let index = this.picList.findIndex((item)=>{
					return item.uuid===e.tempFile.uuid
				})
				this.picList.splice(index,1)
			},
			// 获取定位
			getLocation(){
				uni.getLocation({
					type: 'wgs84',
					success:(res)=>{
						console.log(res,'res')
						this.formData.longitude=res.longitude
						this.formData.latitude=res.latitude
						uni.chooseLocation({
							latitude:this.formData.latitude,
							longitude:this.formData.longitude,
							success:(res)=>{
								this.formData.longitude=res.longitude
								this.formData.latitude=res.latitude
								this.formData.position=res.name
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		padding: 20rpx;
	}
	button{
		background-color: #3c9cff;
		color: #ffffff;
		font-size: 32rpx;
		margin: 50rpx 20rpx 10rpx 20rpx;
	}
	.pic-tips{
		font-size: 12px;
		color:#666666;
	}
</style>
